import React from 'react';
import { Tabs, ListView, List, Button,Modal } from 'antd-mobile';
import { connect } from 'dva';
import moment from 'moment';
import { Helmet } from 'react-helmet';
import _ from 'lodash';
import styles from './AppointmentResult.less';
import Container from '../components/Base/Container';
import classnames from 'classnames';
import { createForm } from "rc-form";
const Item = List.Item;
const TabPane = Tabs.TabPane;

const alert = Modal.alert;

class Appointment extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      isSlideUp: {}
    };
  }

  componentDidMount() {
    this.props.fetchAppointmentSetting();
  }

  callback = (key) => {
    console.log('onChange', key);
  }
  handleTabClick = (key) => {
    console.log('onTabClick', key);
  }

  handleCancelClick = (item) => {
    this.props.cancelAppointment(item);
  }

  showList = list => {
    return (
      //item-warpper
      <div className={styles["appBodyWrap"]}>
      {list.map( (item) => {
        return (
        
/*     <div className={styles["item-context"]}>
          <div className={styles["item-header"]}>预约项目：{item.service_name}</div>
          <div className={styles["item-options"]}>
          <span className={styles["item-text"]}>预约时间：{item.apply_time}</span>
          <span className={styles["item-text"]}>服务门店：{item.branch_name}</span>
          <span className={styles["item-text"]}>育婴师：{item.sale_name}</span> 
        </div>

        <div className={classnames({
          [styles["item-footer"]] : true,
          [styles["clearfix"]] : true,
          [styles.hidden]: item.status !== '0'
        })}>
          <button 
          className={styles["btn-cancel"]}
          onClick={() => {
            let thiz = this;
            alert('取消预约', '确定取消预约？', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () => thiz.handleCancelClick(item) },
          ])}}
          >取消预约</button>
         </div>
      </div> */

      <div className={styles['appItemWrap']}>
        <div className={styles['itemTitle']} style={this.state.isSlideUp[item.service_id] ? {paddingBottom: '0', border: 'none'} : {}}>
          预约项目：{item.service_name}
          {this.state.isSlideUp[item.service_id] ? this.hiddenDom(item.service_id) : ''}
        </div>
        <div className={this.state.isSlideUp[item.service_id] ? styles['slideUp'] : styles['itemBody']}>
          <div className={styles['itemTime']}>预约时间：{item.apply_time}</div>
          <div className={styles['itemStore']}>服务门店：{item.branch_name}</div>
          <div className={styles['itemAd']}>美妆顾问：{item.sale_name}</div>
          <div className={styles['itemCollapse']} onClick={() => this.slideUp(item.service_id)}>收起</div>
        </div>
    </div>
      )})}
    </div>

  )};
  
  /* 收起预约项目 */
  slideUp = (val) => {
    let {isSlideUp} = this.state
    isSlideUp[val] = true

    this.setState({
      isSlideUp: {...isSlideUp}
    })
  }

  /* 展开预约项目 */
  slideDown = (val) => {
    let {isSlideUp} = this.state
    isSlideUp[val] = false

    this.setState({
      isSlideUp: {...isSlideUp}
    })

  }
  
  hiddenDom = (val) => {
    return (
      <span onClick={()=> this.slideDown(val)} style={{display: 'block',float: 'right', color: '#19CAD9'}}>查看</span>
    )
  }

  render() {
    const { wartingServiceList = [], finishedServiceList = [], cancelServiceList = [] } = this.props.appointmentResult;

    const myData = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });


    return (<Container title="预约记录" className={styles["wrap"]}>
      <Helmet>
        <title>预约记录</title>
      </Helmet>

      <div className={styles.indexWrap}>
      <Tabs defaultActiveKey="1" onChange={this.callback} onTabClick={this.handleTabClick}>
        <TabPane tab={`待服务 ${wartingServiceList.length}`} key="1">
        {this.showList(wartingServiceList)}
       </TabPane>
        <TabPane tab={`已服务 ${finishedServiceList.length}`} key="2">
        {this.showList(finishedServiceList)}
        </TabPane>
        <TabPane tab={`已取消 ${cancelServiceList.length}`} key="3">
        {this.showList(cancelServiceList)}
        </TabPane>
      </Tabs>
      </div>
    </Container>);
  }
}


export default connect((state) => {
  return {
    user: state.auth.currentUser,
    appointmentResult: state.appointment.appointmentResult,
  };
},
  (dispatch, props) => {
    return {
      dispatch,
      fetchAppointmentSetting() {
        const shopId = props.location.query.shopId;
        const card_no = props.location.query.card_no;
        dispatch({ type: 'appointment/fetchAppointmentResult', payload: { shopId, card_no } });
      },
      cancelAppointment(item) {
        dispatch({ type: 'appointment/cancelAppointment', payload: { ...item } });
      },
    };
  },
)(createForm()(Appointment));
